<script lang="ts">
import useImage from "@/store/image"

export default {
  name: "SkillIcon",
  components: { },
  props: {
    skill: {
      type: Object
    },
    role: {
      type: String
    },
    useSet: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showInfos: false,
      scs: [{ value: 0, text: "不启用手搓" }, { value: 1, text: "启用手搓" }]
    }
  },
  computed: {
    skillImg() {
      return useImage("characters/", false)(`${this.role}/skill/${this.skill?.name ?? "BUFF"}.png`)
    }
  },
  watch: {
    role() {
      this.skill.useSc = 0
      this.skill.scCount = 1
    }
  },
  mounted() {
    this.skill.useSc = 0
    this.skill.scCount = 1
  },
  methods: {
    show() {
      if (this.useSet) {
        this.showInfos = true
      }

      this.$emit("select")
    },
    close() {
      this.showInfos = false
    },
    calcNums(a, b) {
      const list = []
      for (let i = a; i <= b; i++) {
        list.push({ value: i, text: `Lv.${i}` })
      }

      return list
    },
    calcScNums(a, b) {
      const list = []
      for (let i = a; i <= b; i++) {
        list.push({ value: i, text: `${i}个方向键` })
      }

      return list
    }
  }
}
</script>

<template>
  <view class="skill-icon" @click.stop="show">
    <view class="skill-icon-box">
      <view class="skill-lv">
        {{ skill.current_level }}
      </view>
      <view v-if="skill.tp_max > 0" class="skill-TP green">
        {{ skill.tp_level }}
      </view>
      <view v-if="skill.useSc" class="skill-SC green">
        {{ skill.scCount }}
      </view>
      <img class="skill-icon-inner" :src="skillImg">
    </view>
    <view v-if="showInfos" class="skill-infos">
      <view class="skill-infos-mask" @click.stop="close" />
      <view class="skill-name">
        <view class="skill-name-text">
          {{ skill.name }}
        </view>
        <view class="skill-level-text">
          Lv.{{ skill.need_level }}
        </view>
        <view class="skill-type-text">
          {{ skill.type === 1 ? "主动技能" : "被动技能" }}
        </view>
      </view>
      <view class="skill-level-box">
        <view class="skill-level-tips">
          技能等级
        </view>
        <uni-data-select
          v-model="skill.current_level" style="width: 100%;margin-left: 10px;" dark :clear-icon="false"
          placeholder="等级" :localdata="calcNums(0, skill.level_master)"
        />
      </view>
      <view v-if="skill.tp_max > 0" class="skill-level-box">
        <view class="skill-level-tips">
          TP等级
        </view>
        <uni-data-select
          v-model="skill.tp_level" style="width: 100%;margin-left: 10px;" dark :clear-icon="false"
          placeholder="TP等级" :localdata="calcNums(0, skill.tp_max)"
        />
      </view>
      <view v-if="skill.type === 1" class="skill-level-box">
        <view class="skill-level-tips">
          启用手搓
        </view>
        <uni-data-select
          v-model="skill.useSc" style="width: 100%;margin-left: 10px;" dark :clear-icon="false"
          placeholder="不启用手搓" :localdata="scs"
        />
        <uni-data-select
          v-if="skill.useSc" v-model="skill.scCount" style="width: 100%;margin-left: 10px;" dark :clear-icon="false"
          placeholder="手搓按键数量" :localdata="calcScNums(1, 4)"
        />
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.skill-icon {
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 1px solid #4A4A4A;
  margin: 0 8px 8px 0;

  &.current {
    border-color: #5BE3FF;
  }

  .skill-icon-box {
    position: relative;

    .skill-icon-inner {
      zoom: 1.2857
    }
  }

  .skill-lv, .skill-TP, .skill-SC {
    position: absolute;
    font-size: 12px;
    color: #5BE3FF;
    text-shadow: 2px 0 1px #000, -2px 0 1px #000, 0 2px 1px #000, 0 -2px 1px #000;
    zoom: 0.9;

    &.green {
      font-weight: 700;
      color: #62A72C; // A6E22E
      // text-shadow: 1px 0 1px #62A72C, -1px 0 1px #62A72C, 0 1px 1px #62A72C, 0 -1px 1px #62A72C;
    }
  }
  .skill-lv {
    top: 0;
    right: 3px;
    text-align: right;
  }
  .skill-TP {
    bottom: 2px;
    left: 3px;
    text-align: left;
  }
  .skill-SC {
    bottom: 0;
    right: 3px;
    text-align: right;
  }

  .skill-icon-img {
    width: 100%;
    height: 100%;
  }

  .skill-infos {
    position: absolute;
    left: 10px;
    width: 665rpx;
    border: 1px #4A4A4A solid;
    background-color: #303030;
    padding: 10px;
    z-index: 100;
    color: #CCC;

    .skill-name {
      display: flex;

      .skill-name-text {
        width: calc(100% - 140px);
      }

      .skill-level-text {
        width: 70px;
      }

      .skill-type-text {
        width: 70px;
        text-align: right;
      }
    }

    .skill-level-box {
      display: flex;
      margin-top: 8px;
      line-height: 35px;

      .skill-level-tips {
        width: 70px;
      }
    }

    .skill-infos-mask {
      position: fixed;
      width: 100%;
      height: 100%;
      // background-color: rgba(233, 197, 88, 0.9);
      top: 0;
      left: 0;
      z-index: -1;
    }
  }
}
</style>
